<template>
	<view class="index-wraps">
		<u-swiper :list="bannerArr"></u-swiper>
		<view class="index-wrap">
			<!-- 活动   -->
			<!-- 场馆列表   -->
			<view class="index-ticket-wrap">
				<view class="index-title-wrap">
					<view class="index-line"></view>
					<text class="index-title">热门视频</text>
				</view>
				<view class="index-grid-wrap">
					<view class="index-content-item" @tap="handleShowVideo">
						<image
							src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						<text class="index-grid-title">视频</text>
					</view>
					<view class="index-content-item" @tap="handleShowVideo">
						<image
							src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						<text class="index-grid-title">视频2</text>
					</view>
					<view class="index-content-item" @tap="handleShowVideo">
						<image
							src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						<text class="index-grid-title">视频3</text>
					</view>
				</view>
			</view>
			<!-- 电子门票   -->
			<view class="index-ticket-wrap">
				<view class="index-title-wrap">
					<view class="index-line"></view>
					<text class="index-title">电子泳票</text>
				</view>
				<!-- <view class="index-title-icon-wrap">
					<view :class="[
	              'index-title-icon-item',
	              activeIndex === 1 ? 'index-title-icon-item-active' : '',
	            ]" @tap="handleIcon(1)">
						<view class="index-title-icon">
							<view class="iconfont icon-quanbu index-title-icons"></view>
						</view>
						<view class="index-title-icon-txt">全部</view>
					</view>
					<view :class="[
	              'index-title-icon-item',
	              activeIndex === 2 ? 'index-title-icon-item-active' : '',
	            ]" @tap="handleIcon(2)">
						<view class="index-title-icon">
							<view class="iconfont icon-cika index-title-icons"></view>
						</view>
						<view class="index-title-icon-txt">次卡</view>
					</view>
					<view :class="[
	              'index-title-icon-item',
	              activeIndex === 3 ? 'index-title-icon-item-active' : '',
	            ]" @tap="handleIcon(3)">
						<view class="index-title-icon">
							<view class="iconfont icon-nianqiaxiaoshou index-title-icons"></view>
						</view>
						<view class="index-title-icon-txt">年卡</view>
					</view>
				</view> -->
				<view class="index-title-icon-wrap">
					<view v-for="(item,index) in iconArr" :key="index" :class="[
				  'index-title-icon-item',
				  activeIndex === (index+1) ? 'index-title-icon-item-active' : '']" @tap="handleIcon(item,index)">
						<view class="index-title-icon">
							<image class="index-title-icons" :src="item.img"></image>
						</view>
						<view class="index-title-icon-txt">{{item.txt}}</view>
					</view>
				</view>

				<!-- hot -->
				<view class="index-buy-ticket-wrap">
					<view class="index-buy-ticket-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">次卡</view>
							<view class="index-buy-desc">我是次卡介绍次卡介绍</view>
							<view class="index-buy-price">
								<text>30</text>
								<text class="index-unit">元</text>
							</view>
						</view>
						<view class="index-buy-btn">
							<view class="index-btn" @tap="handleBuy">购买</view>
						</view>
					</view>
					<view class="index-buy-ticket-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">次卡</view>
							<view class="index-buy-desc">我是次卡介绍次卡介绍</view>
							<view class="index-buy-price">
								<text>30</text>
								<text class="index-unit">元</text>
							</view>
						</view>
						<view class="index-buy-btn">
							<view class="index-btn" @tap="handleBuy">购买</view>
						</view>
					</view>
					<view class="index-buy-ticket-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">次卡</view>
							<view class="index-buy-desc">我是次卡介绍次卡介绍</view>
							<view class="index-buy-price">
								<text>30</text>
								<text class="index-unit">元</text>
							</view>
						</view>
						<view class="index-buy-btn">
							<view class="index-btn" @tap="handleBuy">购买</view>
						</view>
					</view>
					<view class="index-buy-ticket-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">次卡</view>
							<view class="index-buy-desc">我是次卡介绍次卡介绍</view>
							<view class="index-buy-price">
								<text>30</text>
								<text class="index-unit">元</text>
							</view>
						</view>
						<view class="index-buy-btn">
							<view class="index-btn" @tap="handleBuy">购买</view>
						</view>
					</view>
					<view class="index-buy-ticket-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">次卡</view>
							<view class="index-buy-desc">我是次卡介绍次卡介绍</view>
							<view class="index-buy-price">
								<text>30</text>
								<text class="index-unit">元</text>
							</view>
						</view>
						<view class="index-buy-btn">
							<view class="index-btn" @tap="handleBuy">购买</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 场馆列表   -->
			<view class="index-ticket-wrap">
				<view class="index-title-wrap">
					<view class="index-line"></view>
					<text class="index-title">场馆列表</text>
				</view>
				<view class="index-buy-ticket-wrap">
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆1</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆2</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆3</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆4</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆5</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
					<view class="index-buy-ticket-item index-venue-item">
						<view class="index-buy-left">
							<image
								src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png" />
						</view>
						<view class="index-buy-content">
							<view class="index-buy-title">场馆6</view>
							<view class="index-buy-desc">我是场馆</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 视频弹窗     -->
			<view class="h-dialog" v-if="videoShow">
				<view class="h-dialog-mask"></view>
				<view class="h-dialog-content">
					<view class="h-close" @tap="handleCloseVideo">X</view>
					<video class="index-video" id="video"
						src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
						initial-time="0" :controls="true" :autoplay="false" :loop="false" :muted="false" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request,
		requestData
	} from "../../../utils/http.js";

	export default {
		data() {
			return {
				bannerArr: [
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
				],
				imgArr: [
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
					"https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg",
				],
				iconArr: [{
						'img': 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png',
						'txt': '全部',
					},
					{
						'img': 'https://ya30images.hbwlife.com/wxmpadmin/onceCard_2.png',
						'txt': '月卡'
					},
					{
						'img': 'https://ya30images.hbwlife.com/wxmpadmin/yearCard_2.png',
						'txt': '年卡'
					}
				],
				videoShow: false,
				activeIndex: 1,
			};
		},
		mounted() {},
		methods: {
			handleShowVideo() {
				this.videoShow = true;
			},
			handleCloseVideo() {
				this.videoShow = false;
			},
			handleBuy() {
				uni.navigateTo({
					url: "/pagesA/studentManageDetail/studentManageDetail",
				});
			},
			handleIcon(item, index) {
				console.log(index)
				this.activeIndex = index + 1;
				if (index == 0) {
					item.img = 'https://ya30images.hbwlife.com/wxmpadmin/allCard_1.png'
				} else if (index == 1) {
					item.img = 'https://ya30images.hbwlife.com/wxmpadmin/onceCard_1.png'
				} else if (index == 2) {
					item.img = 'https://ya30images.hbwlife.com/wxmpadmin/yearCard_1.png'
				}

			},
		},
	};
</script>


<style lang="scss" scoped>
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}

	.container {
		display: flex;
	}

	.index-wraps {
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
		box-sizing: border-box;
		background-image: linear-gradient(#fdfcf5, #fff);
	}

	::v-deep .u-swiper {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.index-wrap {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}

	.index-ticket-wrap {
		width: 100%;
		height: auto;
		min-height: 200rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background: $global-background-grey;
	}

	.index-title-wrap {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
	}

	.index-line {
		width: 6rpx;
		height: 30rpx;
		background-color: $global-color-golden;
		border-radius: 2px;
		box-sizing: border-box;
	}

	.index-title {
		// font-weight: bold;
		color: $global-title-color-bold;
		font-size: 32rpx;
		margin-left: 22rpx;
		box-sizing: border-box;
	}

	.index-title-icon-wrap {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 48rpx;
		box-sizing: border-box;
		background: #fff;
		padding: 20rpx
	}

	.index-title-icon-item {
		width: 93rpx;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;
	}

	.index-title-icon {
		width: 93rpx;
		height: 93rpx;
		background-color: #fdfbeb;
		border-radius: 50%;
		font-size: 28rpx;
		color: $global-color-golden;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.index-title-icon-item-active .index-title-icon {
		background-color: $global-color-golden;
		color: #fff;
		box-sizing: border-box;
	}

	.index-title-icons {
		width: 64rpx;
		height: 64rpx;
	}

	.index-title-icon-txt {
		margin-top: 24rpx;
		color: #010101;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.index-buy-ticket-wrap {
		width: 100%;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
		padding-bottom: 34rpx;
		margin-top: 20rpx;
	}

	.index-buy-ticket-item {
		width: 100%;
		height: auto;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		background: #fff;
	}

	.index-buy-left {
		width: 148rpx;
		height: auto;
	}

	.index-buy-left image {
		width: 148rpx;
		height: 148rpx;
		box-sizing: border-box;
		object-fit: contain;
		border-radius: 12rpx;
	}

	.index-buy-content {
		box-sizing: border-box;
		flex: 1;
		padding: 0 23rpx;
	}

	.index-buy-title {
		font-size: 28rpx;
		color: $global-title-color-bold;
		box-sizing: border-box;
	}

	.index-buy-desc {
		color: $uni-text-color-grey;
		font-size: 24rpx;
		margin-top: 8rpx;
		box-sizing: border-box;
	}

	.index-buy-price {
		margin-top: 8rpx;
		color: #dd524d;
		box-sizing: border-box;
	}

	.index-buy-btn {
		width: 133rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index-btn {
		width: 133rpx;
		height: 55rpx;
		border-radius: 27.5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		background: $global-color-golden;
		box-sizing: border-box;
	}

	.index-venue-item {
		align-items: flex-start;
	}

	.index-grid-wrap {
		width: 100%;
		height: auto;
		display: grid;
		gap: 20rpx;
		grid-template-columns: 1fr 1fr 1fr;
		/* 两列，每列宽度相等 */
		grid-template-rows: auto;
		/* 自动高度 */
		margin-top: 20rpx;
	}

	.index-content-item {
		width: 1fr;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.index-content-item image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.index-grid-title {
		color: #010101;
		font-size: 28rpx;
		margin-top: 10rpx;
		font-weight: 500;
	}

	.h-dialog {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.h-dialog-mask {
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100vh;
	}

	.h-close {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		font-size: 28rpx;
		color: #010101;
		border-radius: 50%;
		background-color: #fff;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		z-index: 9999;
	}

	.index-video {
		width: 100%;
		height: 350rpx;
	}

	.h-dialog-content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		min-height: 350rpx;
		height: auto;
	}

	.index-venue-item .index-buy-left {
		width: 240rpx;
	}

	.index-venue-item .index-buy-left image {
		width: 240rpx;
	}
</style>